<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blindfold Trainer</title>
    <link href="blindfold-trainer.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="header">
        <h2 class="title">3x3 Blindfold Trainer</h2>
    </div>

    <div class="container" id="coding-trainer">
        <div class="flex" id="trainer-main">
            <div class="col tile">
                <div class="canvas">
                    <div class="top" id="top"></div>
                    <div class="front" id="front"></div>
                    <div class="right" id="right"></div>
                </div>
                <h4>Recall the code of the front face.</h4>
            </div>
            <div class="col tile operation">
                <div class="answer" id="answer">?</div>
                <button id="action" data-action="next">Next</button>
            </div>
        </div>

        <div class="coding-settings tile">
            <div>
                <label class="choices-label">Training Object:</label>
                <div class="choices">
                    <label class="choice">
                        <input name="trainingObj" type="radio" value="edge" checked="checked" />
                        Edge
                    </label class="choice">
                    <label>
                        <input name="trainingObj" type="radio" value="corner" />
                        Corner
                    </label>
                </div>
            </div>

            <div>
                <button id="color-open">Color Scheme</button>
                <button id="code-open">Code Scheme</button>
            </div>
        </div>
    </div>

    <div class="modal" id="color-modal">
        <div class="modal-backdrop"></div>
        <div class="modal-body">
            <div class="modal-header">
                <a class="modal-close" id="color-close">close</a>
                <h4 class="title">Color Scheme Settings</h4>
            </div>
            <div class="modal-main">
                <div>
                    <label>U-face Color:</label>
                    <select id="u-face" name="u-face">
                        <option value="green">Green</option>
                        <option value="blue">Blue</option>
                        <option value="red">Red</option>
                        <option value="orange">Orange</option>
                        <option value="white">White</option>
                        <option value="yellow">Yellow</option>
                    </select>
                </div>
                <div>
                    <label>F-face Color:</label>
                    <select id="f-face" name="f-face">
                        <option value="green" disabled="disabled">Green</option>
                        <option value="blue" disabled="disabled">Blue</option>
                        <option value="red">Red</option>
                        <option value="orange">Orange</option>
                        <option value="white">White</option>
                        <option value="yellow">Yellow</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-confirm" id="color-submit">Submit</button>
                <button class="modal-cancel" id="color-cancel">Cancel</button>
            </div>
        </div>
    </div>

    <div class="modal" id="code-modal">
        <div class="modal-backdrop"></div>
        <div class="modal-body">
            <div class="modal-header">
                <a class="modal-close" id="code-close">close</a>
                <h4 class="title">Code Scheme Settings</h4>
            </div>
            <div class="modal-main">
                <div class="code-box" id="code-u-face">
                    <div class="code-grid">
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">B</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="U1" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="U2" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="U3" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">L</div>
                        <div class="code-show">
                            <input class="code-input" id="U8" />
                        </div>
                        <div class="code-show">U</div>
                        <div class="code-show">
                            <input class="code-input" id="U4" />
                        </div>
                        <div class="code-adjacent">R</div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="U7" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="U6" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="U5" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">F</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                    </div>
                </div>
                <div class="code-box" id="code-f-face">
                    <div class="code-grid">
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">U</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="F1" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="F2" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="F3" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">L</div>
                        <div class="code-show">
                            <input class="code-input" id="F8" />
                        </div>
                        <div class="code-show">F</div>
                        <div class="code-show">
                            <input class="code-input" id="F4" />
                        </div>
                        <div class="code-adjacent">R</div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="F7" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="F6" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="F5" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">D</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                    </div>
                </div>
                <div class="code-box" id="code-d-face">
                    <div class="code-grid">
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">F</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="D1" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="D2" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="D3" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">L</div>
                        <div class="code-show">
                            <input class="code-input" id="D8" />
                        </div>
                        <div class="code-show">D</div>
                        <div class="code-show">
                            <input class="code-input" id="D4" />
                        </div>
                        <div class="code-adjacent">R</div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="D7" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="D6" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="D5" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">B</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                    </div>
                </div>
                <div class="code-box" id="code-l-face">
                    <div class="code-grid">
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">U</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="L1" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="L2" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="L3" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">B</div>
                        <div class="code-show">
                            <input class="code-input" id="L8" />
                        </div>
                        <div class="code-show">L</div>
                        <div class="code-show">
                            <input class="code-input" id="L4" />
                        </div>
                        <div class="code-adjacent">F</div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="L7" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="L6" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="L5" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">D</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                    </div>
                </div>
                <div class="code-box" id="code-r-face">
                    <div class="code-grid" id="code-r-face">
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">U</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="R1" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="R2" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="R3" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">F</div>
                        <div class="code-show">
                            <input class="code-input" id="R8" />
                        </div>
                        <div class="code-show">R</div>
                        <div class="code-show">
                            <input class="code-input" id="R4" />
                        </div>
                        <div class="code-adjacent">B</div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="R7" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="R6" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="R5" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">D</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                    </div>
                </div>
                <div class="code-box" id="code-b-face">
                    <div class="code-grid">
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">D</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="B1" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="B2" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="B3" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">L</div>
                        <div class="code-show">
                            <input class="code-input" id="B8" />
                        </div>
                        <div class="code-show">B</div>
                        <div class="code-show">
                            <input class="code-input" id="B4" />
                        </div>
                        <div class="code-adjacent">R</div>
                        <div class="code-hide"></div>
                        <div class="code-show">
                            <input class="code-input" id="B7" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="B6" />
                        </div>
                        <div class="code-show">
                            <input class="code-input" id="B5" />
                        </div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                        <div class="code-adjacent">U</div>
                        <div class="code-hide"></div>
                        <div class="code-hide"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-confirm" id="code-submit">Submit</button>
                <button class="modal-cancel" id="code-cancel">Cancel</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="blindfold-trainer.js"></script>
    <script type="text/javascript">
        // default COLOR_ARR use hard code. Rewrite into changable if needed later.
        let COLOR_ARR = ['green', 'white', 'red', 'blue', 'yellow', 'orange'];
        let cube = new Cube();
        cube.setCodeScheme(BASIC_CODE);
        let mode = "edge";
        let curCase;

        let uface_select = document.getElementById('u-face');
        let fface_select = document.getElementById('f-face');
        let action_btn = document.getElementById('action');

        let color_btn = document.getElementById('color-open');
        let color_close = document.getElementById('color-close');
        let color_cancel = document.getElementById('color-cancel');
        let color_submit = document.getElementById('color-submit');
        let color_modal = document.getElementById('color-modal');

        let code_btn = document.getElementById('code-open');
        let code_close = document.getElementById('code-close');
        let code_cancel = document.getElementById('code-cancel');
        let code_submit = document.getElementById('code-submit');
        let code_modal = document.getElementById('code-modal');

        // color-scheme
        function changeUFace() {
            let uface_clr = uface_select.value;
            let index = COLOR_ARR.indexOf(uface_clr);
            let opp_index = (index + 3) % 6;
            for (const opt of fface_select.options) {
                if (opt.value == COLOR_ARR[index] || opt.value == COLOR_ARR[opp_index]) {
                    opt.setAttribute("disabled", "disabled");
                } else {
                    opt.removeAttribute("disabled");
                }
            }
            fface_select.value = "";
        }

        uface_select.addEventListener('change', function (event) {
            event.preventDefault();
            changeUFace();
        });

        color_btn.addEventListener('click', function (event) {
            event.preventDefault();

            uface_select.value = cube.colorScheme['U'];
            changeUFace();
            fface_select.value = cube.colorScheme['F'];

            color_modal.style.display = 'block';
        });

        color_close.addEventListener('click', function (event) {
            event.preventDefault();
            color_modal.style.display = 'none';
        });

        color_cancel.addEventListener('click', function (event) {
            event.preventDefault();
            color_modal.style.display = 'none';
        });

        color_submit.addEventListener('click', function (event) {
            event.preventDefault();
            // save the color scheme
            if (uface_select.value == "" || fface_select.value == "") {
                alert('Settings incomplete!');
            } else {
                cube.setColorScheme(uface_select.value, fface_select.value);
                color_modal.style.display = 'none';
            }
        });

        // code-scheme
        code_btn.addEventListener('click', function (event) {
            event.preventDefault();

            let codeScheme = cube.getCodeScheme();
            let piece;
            for (const face of ['U', 'D', 'L', 'R', 'F', 'B']) {
                for (let i = 1; i < 9; i++) {
                    piece = face + i.toString();
                    document.getElementById(piece).value = codeScheme[piece];
                }
            }

            code_modal.style.display = 'block';
        });

        code_close.addEventListener('click', function (event) {
            event.preventDefault();
            code_modal.style.display = 'none';
        });

        code_cancel.addEventListener('click', function (event) {
            event.preventDefault();
            code_modal.style.display = 'none';
        });

        code_submit.addEventListener('click', function (event) {
            event.preventDefault();
            // save the code scheme
            let codeScheme = {};
            let piece;
            let code;
            for (const face of ['U', 'D', 'L', 'R', 'F', 'B']) {
                for (let i = 1; i < 9; i++) {
                    piece = face + i.toString();
                    code = document.getElementById(piece).value;
                    codeScheme[piece] = code;
                }
            }
            cube.setCodeScheme(codeScheme);

            code_modal.style.display = 'none';
        })

        // trainer action
        let modeRadio = document.getElementsByName('trainingObj');
        for (const choice of modeRadio) {
            choice.addEventListener('click', function (event) {
                mode = choice.value;
            });
        }

        function printColor(someCase) {
            for (const id of ['front', 'top', 'right']) {
                document.getElementById(id).style.backgroundColor = someCase[id].color;
            }
        }

        function nextCase(mode) {
            let newCase;
            if (mode == 'edge') {
                newCase = cube.randEdge();
                console.log(newCase);
                let index = Math.floor(Math.random() * 2);
                curCase = {
                    'front': cube.pieces[newCase[index]],
                    'top': cube.pieces[newCase[(index + 1) % 2]],
                    'right': { color: '#aaaaaa' }
                };
                console.log(curCase);
            } else if (mode == 'corner') {
                newCase = cube.randCorner();
                console.log(newCase);
                let index = Math.floor(Math.random() * 3);
                curCase = {
                    'front': cube.pieces[newCase[index]],
                    'top': cube.pieces[newCase[(index + 1) % 3]],
                    'right': cube.pieces[newCase[(index + 2) % 3]]
                };
                console.log(curCase);
            }
            document.getElementById('answer').innerText = '？';
            printColor(curCase);

            action_btn.innerText = 'Reveal';
            action_btn.setAttribute('data-action', 'reveal');
        }

        function revealCase() {
            document.getElementById('answer').innerText = curCase['front'].code;

            action_btn.innerText = 'Next';
            action_btn.setAttribute('data-action', 'next');
        }

        action_btn.addEventListener('click', function (event) {
            event.preventDefault();

            let action = action_btn.getAttribute('data-action') + 'Case(mode)';
            eval(action);
        });
    </script>
</body>

</html>